<template>
  <v-card id="overview-world-map-wrapper">
    <div id="overview-world-map"></div>
    <v-overlay :absolute="'absolute'" :value="overlay" :opacity="0.95">
      <div class="d-flex justify-center align-center flex-column overlay-chart-wrapper">
        <Overlay :countryCode="clickedCountryCode"></Overlay>
        <v-btn icon @click="overlay = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </div>
    </v-overlay>
  </v-card>
</template>

<script>
import options from './WorldMapOptions';
import Overlay from "./Overlay";
export default {
  name: 'WorldMap',
  components: {Overlay},
  props: {
    globalInfo: {default: () => [], type: Array},
  },
  data() {
    return {
      WORLD: {},
      mapObj: {},
      //同步加载
      loadedArea: true,
      loadedPins: true,
      //遮罩层控制
      overlay: false,
      clickedCountryCode: '',
    }
  },
  watch: {
    globalInfo: {
      handler() {
        if(this.globalInfo.length <= 0) return;
        this.paintMap();
      },
      deep: true,
      immediate: true,
    },
    loadedArea: {
      handler(n) {
        if(n && this.loadedPins) {
          if(this.mapObj) this.mapObj.setOption(options.WorldMapOption);
          this.mapObj.hideLoading();
        }
      },
      immediate: true,
    },
    loadedPins: {
      handler(n) {
        if(n && this.loadedArea) {
          if(this.mapObj) this.mapObj.setOption(options.WorldMapOption);
          this.mapObj.hideLoading();
        }
      },
      immediate: true,
    },
  },
  mounted(){
    let that = this;
    //load world.json
    this.$api.local.worldMap().then(res => {
      that.WORLD = res;
      //register world.json
      that.$echarts.registerMap('WORLD', this.WORLD);
      //draw the world map
      that.drawMap();

      this.loadedArea = false;
      this.loadedPins = false;
      this.pinMap();
    })
  },
  methods: {
    drawMap(){
      let chartDom = document.getElementById('overview-world-map');
      this.mapObj = this.$echarts.init(chartDom);
      this.mapObj.setOption(options.WorldMapOption);
      //自适应尺寸调整
      window.addEventListener("resize", () => {
        this.mapObj.resize();
      })
      //监听点击事件
      this.mapObj.on('click', (params) => {
        this.overlay = true;
        this.clickedCountryCode = this.$NameToIso3Mapper.get(params.name);
      });
      //启动加载动画
      this.mapObj.showLoading(options.WorldMapLoading);
    },
    paintMap() {
      //把world.json里面的国家数据都做成series中的data
      let data = [];
      for(let i = 0, l = this.globalInfo.length; i < l; i++) {
        let values = [];
        values.push(this.globalInfo[i].confirmed);
        values.push(this.globalInfo[i].recovered);
        values.push(this.globalInfo[i].deaths);
        values.push(this.globalInfo[i].vaccinated);
        let country = {
          name: this.$NameToIso2Mapper.get(this.globalInfo[i].country_code.toUpperCase()),
          value: values,
        };
        if(!country.name) continue;
        data.push(country);
      }
      options.WorldMapAreaSeries.data = data;
      options.WorldMapOption.series[0] = options.WorldMapAreaSeries;
      //同步加载状态
      this.loadedArea = true;
    },
    pinMap() {
      this.$api.overview.provincesInfo(0).then((res) => {
        if(res.data === null) {
          options.WorldMapOption.series[1] = options.WorldMapPinSeries;
          this.doneLoading1 = true;
          return;
        }
        for(let i = 0, l = res.data.length; i < l; i++) {
          let province = {};
          province.name = res.data[i].province ? res.data[i].province : res.data[i].country;
          province.value = options.lonlatToXY(Number(res.data[i].coordinates.longitude), Number(res.data[i].coordinates.latitude))
              .concat(Math.ceil(Math.log(res.data[i].timeline.cases[0] - res.data[i].timeline.recovered[0] - res.data[i].timeline.deaths)));
          options.WorldMapPinSeries.data.push(province);
        }
        options.WorldMapOption.series[1] = options.WorldMapPinSeries;
        this.loadedPins = true;
      }).catch((err) => {
        this.$Message.error('获取省份数据失败 ' + err);
        this.doneLoading1 = true;
      })
    }
  }
}
</script>

<style scoped>
#overview-world-map-wrapper{
  width: 100%;
  height: 100%;
}
#overview-world-map{
  width: 100%;
  height: 100%;
  background: transparent;
}
.overlay-chart-wrapper{
  width: 920px;
}
</style>